<!--
 * @Description:
 * @version:
 * @Author: 潘骏杰
 * @Date: 2022-03-31 10:37:01
 * @LastEditors: 周子尧
 * @LastEditTime: 2022-04-11 10:23:41
-->
<!--
 * @Description:
 * @version: 服务包选择
 * @Author: 潘骏杰
 * @Date: 2021-11-19 09:03:57
 * @LastEditors: 潘骏杰
 * @LastEditTime: 2022-03-29 13:36:26
-->
<template>
  <div>
    <HeaderNav />

    <div class="back-white">
      <van-sidebar v-model="activeIndex" class="fixed">
        <van-sidebar-item
          v-for="(item, index) in titleList"
          :key="item.id"
          :title="item.name"
          :badge="item.badge"
          @click="tab(index)"
        />
      </van-sidebar>
      <div id="href" class="tabs">
        <!-- 锚点索引 -->
        <a id="zero" name="基础套餐" class="md">基础套餐</a>
        <div class="btn" @click="showDP('zero')">基础套餐</div>
        <ul>
          <li
            v-for="item in list"
            v-show="item.from === 'zero'"
            :key="item.id"
            class="row re"
            @click="detail(item)"
          >
            <div class="title black">{{ item.name }}</div>
            <div class="detail van-ellipsis">{{ item.detail }}</div>
            <div class="line-through">¥{{ item.yj }}</div>
            <div class="price">¥{{ item.price }}</div>
            <van-icon name="add" class="disabled" />
          </li>
        </ul>

        <!-- -----------个性化----- -->
        <a id="one" name="个性化套餐" class="md">个性化套餐</a>
        <div class="btn" @click="showDP('one')">个性化套餐</div>
        <ul class="bottom-ul">
          <!-- .stop是click自带的冒泡   -->
          <li
            v-for="item in list"
            v-show="item.from === 'one'"
            :key="item.id"
            class="row re"
            @click.stop="detail(item)"
          >
            <div class="title black">{{ item.name }}</div>
            <div class="detail van-ellipsis">{{ item.detail }}</div>
            <div class="line-through">¥{{ item.yj }}</div>
            <div class="price">¥{{ item.price }}</div>
            <div v-if="item.badge > 0" class="right">
              <van-stepper
                v-model="item.badge"
                min="0"
                theme="round"
                button-size="22"
                disable-input
                @change="change(item)"
              />
            </div>
            <van-icon
              v-else
              name="add"
              class="blue"
              @click.stop="change(item, 1)"
            />
          </li>
        </ul>
        <!-- 点单式套餐 -->
        <div v-if="showDiv" class="rightDilaog" @click.stop="tab(0)">
          <div class="back-white-d">
            点单式套餐
            <van-row gutter="20" class="btnChose">
              <van-col
                v-for="(item, index) in threeList"
                :key="item.id"
                span="8"
                :class="item.chose ? 'current' : ''"
              >
                <div
                  class="chose black"
                  @click.stop="TogchoseThisFun(item.id, index)"
                >
                  高血压{{ item.id }}
                </div>
              </van-col>
            </van-row>
          </div>
        </div>
      </div>
    </div>

    <!-- 底部 -->
    <van-submit-bar
      button-color="#4A90E2"
      text-align="left"
      :price="305 * 100"
      button-text="提交订单"
      @submit="onSubmit"
    >
      <van-icon
        name="cart"
        :badge="num"
        size="40"
        style="margin-right: 20px"
        color="#4A90E2"
        @click="cart()"
      />
    </van-submit-bar>
    <!-- 购物车 组件 -->
    <Cart
      :show="cartShow"
      :title-list="titleList"
      :list="list"
      @channelCart="channelCart"
      @onSubmit="onSubmit"
      @getNum="getNum"
    />
    <!-- 底部弹窗 组件 show是父容器传递给子组件的布尔值， sonobj为父容器传递给子组件的obj-->
    <BottomDialog
      :show="show"
      :sonobj="sonobj"
      @channel="channel"
      @choseTime="choseTime"
    />
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';

import HeaderNav from '@/components/headerNav/index'
import BottomDialog from '@/views/chosePackage/bottomDialog'
import Cart from '@/views/chosePackage/cart'

export default {
  name: 'ChosePackage',
  // import引入的组件需要注入到对象中才能使用
  components: {
    HeaderNav,
    BottomDialog, // 底部弹窗
    Cart // 购物车
  },
  data() {
    // 这里存放数据
    return {
      loading: false,
      show: false, // 底部弹窗参数布尔值
      cartShow: false, // 购物差弹窗布尔
      sonobj: {}, // 底部弹窗所需对象数据
      num: 0,
      activeIndex: 0,
      showDiv: false,
      titleList: [
        { id: 'xx1', name: '基础套餐', badge: '1' },
        { id: 'xx2', name: '个性化套餐', badge: '1' },
        { id: 'xx3', name: '点单式套餐', badge: '3' }
      ],
      list: [
        {
          id: 'jichu01',
          name: '基础医疗服务包',
          badge: '1',
          yj: '240.0',
          price: '30.0',
          from: 'zero',
          detail: '基础健康医疗服务，包括xxx基础健康医疗服务，包括xxx',
          time: '2021年1月1日 至 2021年12月1日 （今年下半年）' // 来自zero的基础套餐
        },
        {
          id: 'jichu02',
          name: '中医自定义服务包',
          badge: '0',
          yj: '240.0',
          price: '30.0',
          from: 'one',
          detail: '基础健康医疗服务，包括尿 ….xxdf ds.' // 来自one的个性化套餐
        },
        {
          id: 'jichu03',
          name: '医养结合服务包3',
          badge: '0',
          yj: '240.0',
          price: '30.0',
          from: 'one',
          detail: '基础健康医疗服务，包括尿 …..' // 来自one的个性化套餐
        },
        {
          id: 'jichu04',
          name: '中医自定义服务包4',
          badge: '3',
          yj: '240.0',
          price: '30.0',
          from: 'one',
          detail: '基础健康医疗服务，包括尿 …..' // 来自one的个性化套餐
        },
        {
          id: 'jichu05',
          name: '医养结合服务包5',
          badge: '1',
          yj: '240.0',
          price: '30.0',
          from: 'one',
          detail: '基础健康医疗服务，包括尿 …..' // 来自one的个性化套餐
        },
        {
          id: 'jichu06',
          name: '中医自定义服务包',
          badge: '1',
          yj: '240.0',
          price: '30.0',
          from: 'one',
          detail: '基础健康医疗服务，包括尿 …..' // 来自one的个性化套餐
        },
        {
          id: 'jichu07',
          name: '医养结合服务包3',
          badge: '1',
          yj: '240.0',
          price: '30.0',
          from: 'one',
          detail: '基础健康医疗服务，包括尿 …..' // 来自one的个性化套餐
        },
        {
          id: 'jichu08',
          name: '中医自定义服务包4',
          badge: '3',
          yj: '240.0',
          price: '30.0',
          from: 'one',
          detail: '基础健康医疗服务，包括尿 …..' // 来自one的个性化套餐
        },
        {
          id: 'jichu09',
          name: '医养结合服务包5',
          badge: '1',
          yj: '240.0',
          price: '30.0',
          from: 'one',
          detail: '基础健康医疗服务，包括尿 …..' // 来自one的个性化套餐
        }
      ],
      threeList: [
        { id: 1 },
        { id: 12, chose: true },
        { id: 13, chose: true },
        { id: 14 },
        { id: 15 },
        { id: 6 },
        { id: 7 },
        { id: 11 },
        { id: 122 },
        { id: 133 },
        { id: 143 },
        { id: 154 },
        { id: 61 },
        { id: 17 }
      ],
      choseList: [], // 选中的新数据还是把老数据提交自定义
      value: 1
    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 生命周期 - 创建完成（可以访问当前this实例）
  async created() {
    // 加载布尔值成功 初始化数据接口判断在这
    await this.getData()
    this.loading = false
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.change()
    this.checkNum(this.threeList)
    // window.sessionStorage.clear();
    // console.log(this.$route.query.title);
  },
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周.期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {},
  // 方法集合
  methods: {
    cart() {
      this.cartShow = true
    },
    choseTime(obj) {
      console.log(obj)
      // 来自弹窗里的时间选择
    },
    channelCart(bol) {
      console.log('父容器')
      console.log(bol)
      this.cartShow = bol
    },
    channel(bol) {
      // console.log('父容器')
      // console.log(bol)
      this.show = bol
    },
    detail(obj) {
      console.log(obj)
      this.$router.push({ path: '/detail', query: { ...obj, id: obj.id }})
    },
    showDP(type) {
      // console.log(type,obj)
      if (type === 'zero') {
        // 过滤基础包的对象
        this.sonobj = {
          from: 'zero',
          name: '基础医疗服务包',
          badge: '1',
          price: '30.0',
          detail: '基础健康医疗服务，包括xxx基础健康医疗服务，包括xxx',
          time: '2021年1月1日 至 2021年12月1日 （今年下半年）'
        }
      } else {
        // 过滤复制当前点击的个性化包对象
        this.sonobj = { from: 'one', price: '30.8' }
      }

      this.$nextTick(() => {
        this.show = true
        // console.log(this.show)
      })
    },
    getNum() {
      this.num = this.list.filter((e) => {
        return e.badge > 0
      }).length
    },
    getData() {
      // 拉取数据接口
      // 初始化购物车数量
      this.getNum()
    },
    tab(index) {
      // 切换左侧导航
      this.showDiv = false
      if (index === 0) {
        // 锚点基础套餐
        this.$el.querySelector('#zero').scrollIntoView(true)
      } else if (index === 1) {
        // 锚点个性化
        this.$el.querySelector('#one').scrollIntoView(true)
      } else if (index === 2) {
        // 点单式套餐
        this.showDiv = true
      }
    },
    onSubmit() {
      console.log(this.list, this.choseList)
      this.$toast.success('提交成功')
    },
    change(obj, num) {
      if (window.event) {
        window.event.stopPropagation() // 阻止事件冒泡
      }

      // 计步器change
      // 个性化---计算
      if (num === 1) {
        obj.badge = 1
      }
      const titleList = this.titleList
      const list = this.list
      const countPerson = list.filter((e) => {
        return e.from === 'one' && e.badge > 0
      }).length
      titleList[1].badge = countPerson // 索引值1对应的个性化   个数赋值
      console.log(countPerson)

      // 同步购物车数量
      this.getNum()
    },
    checkNum(newlist) {
      this.threeList = JSON.parse(JSON.stringify(newlist))
      this.choseList = this.threeList.filter((e) => {
        return e.chose
      })

      const titleList = this.titleList

      // console.log(this.choseList)//返回的点单式套餐---新数据在这--接口提交的对象
      const count = this.choseList.length // 个数点单获取

      titleList[2].badge = count

      this.titleList = JSON.parse(JSON.stringify(titleList))
    },
    TogchoseThisFun(id, index) {
      // console.log(id,index)
      const newlist = this.threeList
      this.threeList = []
      if (newlist[index].chose) {
        newlist[index].chose = false
      } else {
        newlist[index].chose = true
      }
      console.log(newlist)
      // 计算数量
      this.checkNum(newlist)
    }
  } // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang="less" scoped>
/deep/ .van-hairline--bottom::after {
  display: none !important;
}
/deep/ .van-submit-bar__price {
  color: #4a4a4a !important;
}
.fixed {
  position: fixed;
  top: 40px;
  left: 0;
}
.tabs {
  margin-left: 180px;
  font-size: 16px;
  overflow: hidden;
}
ul {
  margin-bottom: 30px;
}
ul.bottom-ul {
  margin-bottom: 70px;
}
.row {
  line-height: 22px;
  font-size: 16px;
  margin-bottom: 20px;
}
.row i.van-icon {
  position: absolute;
  right: 30px;
  bottom: 0;
}
/deep/ .tabs .van-index-bar__sidebar {
  display: none;
}
a.md {
  color: #d2d2d2;
}
.btn {
  width: 90px;
  height: 40px;
  background: rgba(74, 144, 226, 0.2);
  border-radius: 8px;
  line-height: 40px;
  text-align: center;
  color: #4a90e2;
  margin: 10px 0;
}
.title {
  color: #4a4a4a;
  font-weight: 500;
  font-size: 18px;
}
.detail {
  color: #9b9b9b;
}
.line-through {
  text-decoration: line-through;
  color: #929292;
  font-size: 12px;
}
.price {
  font-weight: 400;
  color: #ff4473;
  font-size: 18px;
}
.price + .right {
  position: absolute;
  right: 30px;
  bottom: 5px;
}
/deep/.back-white .van-sidebar-item__text {
  width: 100%;
}
.disabled {
  color: #a39c9c;
}
/deep/ .van-stepper--round .van-stepper__plus {
  background-color: #4a90e2;
}
/deep/ .van-stepper--round .van-stepper__minus {
  color: #4a90e2;
  background-color: #fff;
  border: 0.02667rem solid #4a90e2;
}
.rightDilaog {
  position: fixed;
  left: 160px;
  top: 45px;
  z-index: 20;
  width: calc(100% - 160px);
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
}
.back-white-d {
  background: #fff;
  padding: 20px;
  border: 1px solid #fff;
}
.btnChose .van-col .chose {
  text-align: center;
  background: #f8f8f8;
  border-radius: 8px;
  line-height: 40px;
  margin: 8px 0;
  font-weight: 500;
}
.btnChose .van-col.current .chose {
  background: #4a90e2;
  color: #fff !important;
}
</style>
